<template>
  <view
    :style="{ '--themeColor': themeColor }"
    class="ticket_item"
    @click="pullDownCoupon(coupon)"
  >
    <view class="discount">
      <view v-if="denomination > 0" class="discount-unit">¥</view>
      <view class="discount-content">{{
        denomination > 0 ? denomination / 100 : discountPercent / 10
      }}</view>
      <view v-if="!denomination > 0" class="discount-unit">折</view>
    </view>
    <view class="rule"> 满{{ transactionMinimum / 100 }}元可用 </view>
    <view :class="['get', pullDown ? 'took' : '']">
      {{ pullDown ? "已领" : "领" }}
    </view>
  </view>
</template>

<script>
import { receiveCoupon } from "@/service/api/sp-coupon";
import { mapState } from "@dcloudio/vue-cli-plugin-uni/packages/vuex3/dist/vuex.common";

export default {
  props: {
    denomination: {
      type: Number,
      default: 0,
    },
    discountPercent: {
      type: Number,
      default: 0,
    },
    transactionMinimum: {
      type: Number,
      default: 0,
    },
    receiveCode: {
      type: [Number, String],
      default: 0,
    },
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      pullDown: false,
    };
  },
  methods: {
    pullDownCoupon() {
      if (this.pullDown) return;
      let { receiveCode } = this;
      receiveCoupon({
        receiveCode,
      })
        .then(() => {
          this.pullDown = true;
          uni.showToast({
            title: "领取成功",
          });
        })
        .catch((err) => {
          uni.showToast({
            title: err?.msg,
            icon: "none",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.ticket_item {
  font-size: 16rpx;
  font-family: PingFang SC;
  font-weight: 500;
  background-color: #fff5f0;
  position: relative;
  z-index: 5;
  align-items: center;
  height: 50rpx;
  color: #daa629;
  border: 1rpx solid #daa629;
  padding: 0 9rpx 0 4rpx;
  overflow: hidden;
  margin-right: 20rpx;
  border-radius: 6rpx;
  display: inline-flex;

  .discount {
    font-size: 20rpx;
    font-family: PingFang SC;
    color: #daa629;
    border-right: 1px dashed #daa629;
    padding-right: 9rpx;
    display: inline-flex;
    align-items: baseline;
    .discount-unit {
      font-size: 16rpx;
      color: var(--theme-color);
      padding: 1rpx;
    }
    .discount-content {
      font-size: 20rpx;
      font-weight: 500;
      color: var(--theme-color);
    }
  }

  .rule {
    display: inline-block;
    position: relative;
    margin-right: 15rpx;
    font-size: 16rpx;
    padding-left: 8rpx;
  }

  .get {
    width: 34rpx;
    height: 34rpx;
    background: var(--theme-color);
    font-size: 16rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    border-radius: 6rpx;
    align-items: center;
    display: flex;
    justify-content: center;
    &.took {
      background: transparent;
      border-left: 1rpx solid var(--theme-color);
      color: var(--theme-color);
      border-radius: 0;
      padding-left: 5rpx;
    }
  }
}
</style>
